/* nav bar */
.nav-bar{width:100%;display:flex;position:fixed;top:0;height:60px;z-index:1000;justify-content:space-between;align-items:center;background-color:#333;color:#fff;font-size:.75rem}.brand-title{width:100px;margin:.4rem 1rem}.nav-bar-links{height:100%}.nav-bar-links a.is-active{color:#ff6b57}.nav-bar-links ul{display:flex;padding:0;margin:0}.nav-bar-links li{background-color:#333;list-style:none}.nav-bar-links li{margin-top:0}.nav-bar-links li a{display:block;text-decoration:none;color:#fff;padding:0 1rem;line-height:60px}.nav-bar-links li:hover{background-color:#555}

/* product catalog datatable */

h2 {
  font-weight: 600;
}


.dataTables_wrapper .dataTables_filter input {
  border-radius: 0.25rem;
dataTables_wrapper  padding: 0.5rem;
  margin-left: 0.5rem;
}



/* Table header styled to blend with #333 navbar */
#productTable thead {
  background-color: #444;
  color: #f1f1f1;
}

/* Optional: bold and clean font for headers */
#productTable thead th {
  font-weight: 600;
  text-transform: uppercase;
}

/* Row hover for better UX */
.table-hover tbody tr:hover {
  background-color: #555; /* Slight contrast with the header/nav */
  color: #fff;
}

#productTable tbody tr:nth-child(even) {
  background-color: #3a3a3a;
}

#productTable tbody tr:nth-child(odd) {
  background-color: #2e2e2e;
}

/* WhatsApp button */
/* Custom styles for the floating WhatsApp button */
.whatsapp-button {
	position: fixed; /* Make it float */
	top: 20%;
	/*bottom: 20px;*/ /* Distance from the bottom */
	right: 20px; /* Distance from the right */
	z-index: 1000; /* Ensure it stays on top of other content */

	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px; /* Size of the circular button */
	height: 64px; /* Size of the circular button */
	background-color: #25D366; /* WhatsApp green */
	color: white;
	border-radius: 50%; /* Make it perfectly circular */
	text-decoration: none;
	font-size: 2rem; /* Size of the WhatsApp icon */
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Shadow for depth */
	transition: all 0.3s ease; /* Smooth transitions for hover effects */
	overflow: visible; /* Allow tooltip to overflow */
}

.whatsapp-button:hover {
	transform: translateY(-3px); /* Slight lift on hover */
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.whatsapp-button:active {
	transform: translateY(0); /* Return to original position on click */
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

/* Tooltip styles */
.whatsapp-tooltip {
	position: absolute;
	right: 75px; /* Position to the left of the button */
	bottom: 0px; /* Align with the bottom of the button */
	background-color: #E0FFC6; /* Lighter green background for the text area */
	color: #2D3748; /* Darker text for better contrast */
	padding: 0.75rem 1rem;
	border-radius: 0.75rem; /* Rounded corners for the tooltip */
	white-space: nowrap; /* Prevent text from wrapping */
	opacity: 0; /* Hidden by default */
	visibility: hidden; /* Hidden by default */
	transition: opacity 0.3s ease, visibility 0.3s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for the tooltip */
	display: flex;
	flex-direction: column;
	align-items: flex-end; /* Align text to the right within tooltip */
	font-size: 1.125rem; /* Base text size */
	pointer-events: none; /* Allows clicks to pass through to the button */
}

.whatsapp-button:hover .whatsapp-tooltip {
	opacity: 1; /* Show on hover */
	visibility: visible; /* Show on hover */
}

.whatsapp-tooltip span:first-child {
	font-size: 1rem; /* Adjust font size for tooltip */
	font-weight: 500;
}

.whatsapp-tooltip span:last-child {
	font-size: 1.25rem; /* Smaller font for phone number in tooltip */
	font-weight: 700;
	color: #718096;
}

/* Adjust icon within the button */
.whatsapp-button i {
	line-height: 1; /* Ensure icon is vertically centered */
}


.qr-afip {
  width: 4rem;
  margin: 0;
  position: relative;
  bottom: -3rem;
  left: 1rem;
  z-index: 1000;
}